<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>绝对定位</title>
  <link href="fixed.css" rel="stylesheet">
  <style>
    body {
      background: #fff;
      margin: 0 auto;
      width: 988px;
    }

    #headHeader {
      position: absolute;
      top: 0;
      margin: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
      padding: 0;
      width: 988px;
      height: 100px;
      text-align: center;
    }

    article {
      position: absolute;
      top: 100px;
      margin-left: 200px;
      border-right: 1px solid rgba(0, 0, 0, 0.5);
      width: 718px;
      height: 500px;
    }
    #contentHeader {
      padding: 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    }
    #content {
      margin: 10px;
      width: 698px;
      height: 400px;
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid lightgray;
      -moz-border-radius: 10px 10px 10px 10px;
      -webkit-border-radius: 10px 10px 10px 10px;
      -ms-border-radius: 10px 10px 10px 10px;
      -o-border-radius: 10px 10px 10px 10px;
      text-align: justify;
      overflow: auto;
    }
    footer {
      position: absolute;
      top: 600px;
      border-top: 1px solid rgba(0, 0, 0, 0.5);
      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
      padding: 5px 0 0 0;
      width: 988px;
      height: 30px;
      text-align: center;
    }
    #nav {
      position: absolute;
      top: 100px;
      border-right: 1px solid rgba(0, 0, 0, 0.5);
      padding: 20px 0 0 20px;
      width: 180px;
      height: 480px;
    }
    #AD {
      position: absolute;
      top: 100px;
      left: 937px;
      width: 69px;
      height: 500px;
    }
  </style>
</head>

<body>
<header id="headHeader">
  <h1>HEADER</h1>                   <!-- 对应你图片的 HEADER  -->
</header>

<article>
  <header id="contentHeader">
    <h3>内容标题</h3>               <!-- 对应你图片的 内容标题  -->
  </header>
  <div id="content">
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
    <p>内容</p>                           <!-- 对应你图片的 内容  -->
  </div> <!-- /end #content -->
</article>

<footer>
  FOOTER                            <!-- 对应你图片的 FOOTER  -->
</footer>

<aside id="nav">         <!-- 以下开始对应你图片的 导航主菜单  -->
  <nav>
    <ul>
      <li><a href="#">文章</a></li>
      <li><a href="#">文章</a></li>
      <li><a href="#">文章</a></li>
      <li><a href="#">文章</a></li>
      <li><a href="#">文章</a></li>
    </ul>
  </nav>
</aside>                 <!-- 以上对应你图片的 导航主菜单  -->

<aside id="AD">
  广告位               <!-- 对应你图片右边的白色小框 广告位  -->
</aside>
</body>
</html>
